<div>
  <h2>Organization Chart</h2>
  <p-growl [(value)]="messages"></p-growl>
  <h3 class="first">Advanced</h3>
  <p>Organization with advanced customization.</p>
  <p-organizationChart [value]="data1" selectionMode="single" [(selection)]="selectedNode" (onNodeSelect)="onNodeSelect($event)" styleClass="company">
    <ng-template let-node pTemplate="person">
      <div class="node-header ui-corner-top">{{node.label}}</div>
      <div class="node-content">
        <img src="assets/showcase/images/demo/organization/{{node.data.avatar}}" width="32">
        <div>{{node.data.name}}</div>
      </div>
    </ng-template>
    <ng-template let-node pTemplate="department">
      {{node.label}}
    </ng-template>
  </p-organizationChart>

  <h3>Basic</h3>
  <p>Hierarchical data with zero configuration.</p>
  <p-organizationChart [value]="data2"></p-organizationChart>
</div>
